<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="../../../assets/css/normalize.css">
    <!-- 重置样式基础上补充的其他重置样式 -->
    <link rel="stylesheet" href="../../../assets/css/reset.css">
    <!-- 面向属性的样式 -->
    <link rel="stylesheet" href="../../../assets/css/property.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../../assets/css/basic.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../../../icons/iconfont.css">
    <!-- 当前页面css -->
    <link rel="stylesheet" href="./me.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <a class="hearTop" href="">
            <div class="topLeft">
                <div class="headPort">
                    <img src="../../../assets/imgs/头像.jpg" alt="">
                    <span class="vip">VIP</span>
                </div>
            </div>
            <p>用户名</p>
            <span class="arrow iconfont icon-xiangyou"></span>
        </a>
        <p class="autograph">个性签名: XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
    </header>

    <!-- 个人动态 -->
    <div class="userDynamic clearfix">
        <span class="iconfont icon-shujuku"></span>
        <p class="personal">个人动态</p>
        <span class="arrow iconfont icon-xiangyou"></span>
        <p class="number">10条</p>
    </div>

    <!-- 运动数据 -->
    <div class="MotionData clearfix">
        <p class="dataTop clearfix">
            <span class="iconfont icon-shuju"></span>
            <span class="dataText">运动数据</span>
            <span class="arrow iconfont icon-xiangyou"></span>
        </p>
        <div class="dataLeft dpflex">
            <p>总运动</p>
            <p>99999<span>分钟</span></p>
        </div>
        <div class="dataRight dpflex">
            <p>本周消耗</p>
            <p>99999<span>千卡</span></p>
        </div>
    </div>

    <!-- 运动徽章 -->
    <div class="badge">
        <p class="badgeTop clearfix">
            <span class="iconfont icon-xunzhang"></span>
            <span class="dataText">我的运动徽章</span>
            <span class="arrow iconfont icon-xiangyou"></span>
        </p>
        <ul class="dpflex">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!-- 退出登录 -->
    <div class="logout">
        <p>退出登录</p>
    </div>

    <!-- 尾部 -->
    <footer>
        <ul class="dpflex">
            <li>
                <a href="#">
                    <span class="iconfont icon-shouye"></span>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-tubiaozhizuomoban"></span>
                    <span>运动</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-quanzi"></span>
                    <span>圈子</span>
                </a>
            </li>
            <li>
                <a class="after" href="#">
                    <span class="iconfont icon-wode"></span>
                    <span>我的</span>
                </a>
            </li>
        </ul>

    </footer>




</body>

</html>